import React from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Form, Input, Card } from 'antd'
import { useNavigate } from 'react-router-dom'

const Login = () => {
  const nav = useNavigate()
  const onFinish = (values) => {
    console.log('Received values of form: ', values)
    localStorage.setItem('token', 'admin-token')
    nav('/')
  }

  return (
    <div className="login-container">
      <Card
        title={
          <h2 
            style={{ 
              textAlign: 'center', 
              margin: '20px 0',
              color: '#2c3e50',
              fontSize: '28px',
              fontWeight: '600'
            }}
          >
            Welcome Login
          </h2>
        }
      >
        <Form
          size={'large'}
          name="login"
          initialValues={{
            username: 'admin',
            password: '123456'
          }}
          style={{
            width: '400px',
            padding: '20px'
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名！'
              }
            ]}
          >
            <Input 
              prefix={<UserOutlined style={{ color: '#666' }} />} 
              placeholder="用户名" 
              style={{
                height: '45px',
                borderRadius: '8px'
              }}
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码！'
              }
            ]}
          >
            <Input 
              prefix={<LockOutlined style={{ color: '#666' }} />} 
              type="password" 
              placeholder="密码"
              style={{
                height: '45px',
                borderRadius: '8px'
              }}
            />
          </Form.Item>

          <Form.Item style={{ marginTop: '30px' }}>
            <Button 
              block 
              type="primary" 
              htmlType="submit"
              style={{
                height: '45px',
                borderRadius: '8px',
                background: 'linear-gradient(to right, #2980b9, #8e44ad)',
                border: 'none',
                fontSize: '16px',
                fontWeight: '500'
              }}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login
